<template>
	<ul class="list-ul">
		<li class="list-li" 
				ref="remove"
				:style="deleteSlider"
				@touchstart='touchStart'
				@touchmove='touchMove'
				@touchend='touchEnd'>
			<div class="con">
				<slot>1</slot>
			</div>
			<div class="btn">删除</div>
		</li>
	</ul>
</template>
<script>
	export default {
		name: 'uni-left-touch',
		data() {
			return {
				initX: 0, //触摸位置
				moveX: 0, //滑动时的位置
				x: 0, //移动距离
				objX: 0,//目标对象位置
				obj:'', //目标对象
				deleteSlider:'',
			}
		},
		methods:{
			touchStart(ev){
				this.obj = this.$refs.remove;
				//tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
				if(ev.touches.length == 1){
						// 记录开始位置
						this.initX = ev.touches[0].clientX;
					}
			},
			touchMove(ev){
				this.moveX = ev.touches[0].clientX;
				this.x = this.moveX - this.initX;
				if (this.x >= 0) {
					this.deleteSlider = "transform:translateX(0px)";
				} else if (this.x < 0) {
					var l = Math.abs(this.x);
					this.deleteSlider = "transform:translateX("+ -l +"px)";
					if (l > 80) {
						l = 80;
						this.deleteSlider = "transform:translateX("+ -l +"px)";
					}
				}
			},
			touchEnd(ev){
				this.objX = this.x;
				if (this.objX > -40) {
					this.deleteSlider = "transform:translateX(0px)";
					this.objX = 0;
				} else {
					this.objX = -80;
					this.deleteSlider = "transform:translateX("+-80+"px)";
				}
			}
		}
	}
</script>
<style>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.list-ul {
		overflow: hidden
	}

	.list-li {
		border-bottom: 1px solid #fcfcfc;
		position: relative;
		color: #666;
		background: #f2f2f2;
		-webkit-transform: translateX(0px);
	}

	.btn {
		position: absolute;
		top: 0;
		right: -80px;
		text-align: center;
		background-color: #F52A4C;
		color: #fff;
		width: 80px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
